<template>
  <div class="tradingRecordWrap">
    <div class="tradingRecord">
      <div class="tabTitle">
        <span :class="{active: currentListType === 0}" @click="getListByListType(0)">
        {{lang['current entrustment']}} <i v-if="currentListType !== 0 && subscript.current.count > 0" v-text="subscript.current.count > 99 ? '99+' : subscript.current.count"></i>
        </span>
        <span :class="{active: currentListType === 1}" @click="getListByListType(1)">
        {{lang['historical order']}} <i v-if="currentListType !== 1 && subscript.history.count > 0" v-text="subscript.history.count > 99 ? '99+' : subscript.history.count"></i>
        </span>
        <span :class="{active: currentListType === 2}" @click="getListByListType(2)">
        {{lang['transaction Records']}} <i v-if="currentListType !== 2 && subscript.deal.count > 0" v-text="subscript.deal.count > 99 ? '99+' : subscript.deal.count"></i>
        </span>
        <!-- more字段，由父组件控制显示或者隐藏 -->
        <router-link :to="{name: 'tradeList', params: {type: currentListType}}" class="more">{{lang.allData}}</router-link>
      </div>

      <div class="wrap" :style="{height: (tradeRecordListScrollWrapHeight + tradeRecordToolHeight + 32) + 'px'}">
        <div class="list-view" ref="tradeRecordListScrollWrap">
          <div class="tools" v-if="userInfo.userName" ref="tools">
            <span class="btn" :class="{active: currentDateType === -1}" @click="getListByDateType(-1)">{{lang['whole']}}</span>
            <span class="btn" :class="{active: currentDateType === 0}" @click="getListByDateType(0)">{{lang['the same day']}}</span>
            <span class="btn" :class="{active: currentDateType === 1}" @click="getListByDateType(1)">{{lang['a week']}}</span>
            <span class="btn" :class="{active: currentDateType === 2}" @click="getListByDateType(2)">{{lang['a month']}}</span>
            <span class="btn" :class="{active: currentDateType === 3}" @click="getListByDateType(3)">{{lang['trimester']}}</span>
            <div class="date">
              <el-date-picker v-model="selectedStartDate" type="date" :placeholder="lang['please select start date']" :readonly="readOnly" @focus="setDateInit()">
              </el-date-picker>          ——
              <el-date-picker v-model="selectedEndDate" type="date" :placeholder="lang['please select end date']" :readonly="readOnly" @focus="setDateInit()">
              </el-date-picker>
            </div>
            <button type="button" class="filterBth" @click="selectStartAndEndDate()"><img src="../../../assets/images/page/asset_09.png">
              {{lang['dressing screening']}}
            </button>
          </div>
          <!-- 当前委托 -->
          <table class="tradeRecordList" v-show="currentListType === 0">
            <thead>
              <tr>
                <th :style="orderBookListTdStyle.time" class="sortField" @click="changeSortBy('CreateTime', currentSort, 'entrust', $event)">
                  {{lang.time}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.symbol" class="sortField" @click="changeSortBy('TradingConfigID', currentSort, 'entrust', $event)">
                  {{lang['trade on']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.side" class="sortField" @click="changeSortBy('TradeSide', currentSort, 'entrust', $event)">
                  {{lang['buying and selling']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.price" class="sortField" @click="changeSortBy('Price', currentSort, 'entrust', $event)">
                  {{lang['commissioned price']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.quantity" class="sortField" @click="changeSortBy('TotalNum', currentSort, 'entrust', $event)">
                  {{lang['entrustment number']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.remaining" class="sortField" @click="changeSortBy('Num', currentSort, 'entrust', $event)">
                  {{lang['number outstanding transactions']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.status" class="sortField" @click="changeSortBy('Status', currentSort, 'entrust', $event)">
                  {{lang.status}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <!--th :style="orderBookListTdStyle.orderId}">{{lang['order id']}}</th-->
                <th :style="orderBookListTdStyle.operation">{{lang['operate']}}</th>
              </tr>
            </thead>
          </table>
          <!-- 历史委托 -->
          <table class="tradeRecordList" v-show="currentListType === 1">
            <thead>
              <tr>
                <th :style="orderBookListTdStyle.time" class="sortField" @click="changeSortBy('CreateTime', currentSort, 'history', $event)">
                  {{lang.time}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.symbol" class="sortField" @click="changeSortBy('TradingConfigID', currentSort, 'history', $event)">
                  {{lang['trade on']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.side" class="sortField" @click="changeSortBy('TradeSide', currentSort, 'history', $event)">
                  {{lang['buying and selling']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.price" class="sortField" @click="changeSortBy('Price', currentSort, 'history', $event)">
                  {{lang['commissioned price']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.quantity" class="sortField" @click="changeSortBy('TotalNum', currentSort, 'history', $event)">
                  {{lang['entrustment number']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.remaining" class="sortField" @click="changeSortBy('DealNum', currentSort, 'history', $event)">
                  {{lang['transaction volume']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="orderBookListTdStyle.status" class="sortField" @click="changeSortBy('Status', currentSort, 'history', $event)">
                  {{lang.status}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <!--th :style="orderBookListTdStyle.orderId">{{lang['order id']}}</th-->
                <th :style="orderBookListTdStyle.operation">{{lang['operate']}}</th>
              </tr>
            </thead>
          </table>
          <!-- 成交记录 -->
          <table class="tradeRecordList" v-show="currentListType === 2">
            <thead>
              <tr>
                <th :style="tradeRecordDetailListTdStyle.time" class="sortField" @click="changeSortBy('CreateTime', currentSort, 'customer', $event)">
                  {{lang['time']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="tradeRecordDetailListTdStyle.symbol" class="sortField" @click="changeSortBy('TradingConfigID', currentSort, 'customer', $event)">
                  {{lang['trade on']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="tradeRecordDetailListTdStyle.side" class="sortField" @click="changeSortBy('TradeSideInt', currentSort, 'customer', $event)">
                  {{lang['buying and selling']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="tradeRecordDetailListTdStyle.price" class="sortField" @click="changeSortBy('Price', currentSort, 'customer', $event)">
                  {{lang['street value']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <th :style="tradeRecordDetailListTdStyle.quantity" class="sortField" @click="changeSortBy('Num', currentSort, 'customer', $event)">
                  {{lang['transaction volume']}}
                  <span class="sortMark">
                    <i class="sortMark-icon up"></i>
                    <i class="sortMark-icon down"></i>
                  </span>
                </th>
                <!--th :style="tradeRecordDetailListTdStyle.fee">{{lang['poundage']}}</th-->
                <!--th :style="tradeRecordDetailListTdStyle.orderId">{{lang['order id']}}</th-->
              </tr>
            </thead>
          </table>

          <div class="tradeRecordListScrollWrap" :style="{height: tradeRecordListScrollWrapHeight + 'px'}">
            <!-- 当前委托 -->
            <table class="tradeRecordList" v-show="currentListType === 0">
              <tbody>
                <tr v-for="(item, index) in orderBookListTemp">
                  <td colspan="9">
                    <table>
                      <tbody>
                        <tr>
                          <table>
                            <tbody>
                              <tr>
                                <td v-text="formatDate(item.CreateTime)" :style="orderBookListTdStyle.time"></td>
                                <td v-text="item.Symbol" :style="orderBookListTdStyle.symbol"></td>

                                <td v-if="item.TradeSide === 0" v-text="lang['buy']" class="buy" :style="orderBookListTdStyle.side"></td>
                                <td v-if="item.TradeSide === 1" v-text="lang['sell']" class="sell" :style="orderBookListTdStyle.side"></td>

                                <td v-if="item.OrderType === 0" v-text="lang['market price']" :style="orderBookListTdStyle.price"></td>
                                <td v-if="item.OrderType !== 0" v-text="formatNum(item.Price, 'price', item)" :style="orderBookListTdStyle.price"></td>

                                <td :style="orderBookListTdStyle.quantity">{{formatNum(item.TotalNum, 'quantity', item)}}</td>
                                <td v-text="formatNum(item.Num, 'quantity', item)" :style="orderBookListTdStyle.remaining"></td>

                                <td v-if="item.Status === -2" v-text="lang['cancellation deal']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === -1" v-text="lang['of no avail']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 0" v-text="lang['waiting deal']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 1" v-text="lang['partially filled']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 2" v-text="lang['complete transaction']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === -99" v-text="'--'" :style="orderBookListTdStyle.status"></td>

                                <!--td v-text="item.OrderNO" :width="orderBookListWidths.orderId"></td-->
                                <td :style="orderBookListTdStyle.operation">
                                  <a class="btn" @click="cancelOrder(item)">{{lang['cancelBth']}}</a>
                                  <a class="btn" :class="{opened: item.isShowDetailList}" @click="openDetailList(0, index, item, item.ID, item.TradeSide)">{{lang['detailed information']}}
                                    <img src="./../images/down-detail.png" v-if="item.isShowDetailList">
                                    <img src="../../../assets/images/head/menu-arrow-up.png" v-if="!item.isShowDetailList">
                                  </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </tr>
                        <tr v-show="item.detailList && item.isShowDetailList">
                          <td colspan="9">
                            <table class="detailList">
                              <thead>
                                <tr>
                                  <td :style="detailListTdStyle.time">{{lang['time']}}</td>
                                  <td :style="detailListTdStyle.price">{{lang['street value']}}</td>
                                  <td :style="detailListTdStyle.quantity">{{lang['transaction volume']}}</td>
                                  <td :style="detailListTdStyle.empty">&nbsp;</td>
                                  <!--td :style="detailListTdStyle.fee">{{lang['poundage']}}</td-->
                                  <!--td :style="detailListTdStyle.orderId">{{lang['order id']}}</td-->
                                </tr>
                              </thead>
                              <tbody>
                                <tr v-for="item2 in item.detailList">
                                  <td :style="detailListTdStyle.time" v-text="formatDate(item2.CreateTime)"></td>
                                  <td :style="detailListTdStyle.price" v-text="formatNum(item2.Price, 'price', item2)"></td>
                                  <td :style="detailListTdStyle.quantity" v-text="formatNum(item2.Num, 'quantity', item2)"></td>
                                  <td :style="detailListTdStyle.empty">&nbsp;</td>
                                  <!--td :style="detailListTdStyle.fee" v-text="item2.FundsFee">0.2</td-->
                                  <!--td :style="detailListTdStyle.orderId" v-text="item2.OrderNO">564564464</td-->
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
              <div class="loadmore" @click="loadMoreRecord" v-show="orderBookList.length > 20 && this.orderBookListTemp.length < this.orderBookList.length">
                <span v-text="lang.indexMore"></span>
              </div>
            </table>
            <!-- 历史委托 -->
            <table class="tradeRecordList" v-show="currentListType === 1">
              <tbody>
                <tr v-for="(item, index) in tradeRecordList">
                  <td colspan="9">
                    <table>
                      <tbody>
                        <tr>
                          <table>
                            <tbody>
                              <tr>
                                <td v-text="formatDate(item.CreateTime)" :style="orderBookListTdStyle.time"></td>
                                <td v-text="item.Symbol" :style="orderBookListTdStyle.symbol"></td>

                                <td v-if="item.TradeSide === 0" v-text="lang['buy']" class="buy" :style="orderBookListTdStyle.side"></td>
                                <td v-if="item.TradeSide === 1" v-text="lang['sell']" class="sell" :style="orderBookListTdStyle.side"></td>

                                <td v-if="item.OrderType === 0" v-text="lang['market price']" :style="orderBookListTdStyle.price"></td>
                                <td v-if="item.OrderType !== 0" v-text="formatNum(item.Price, 'price', item)" :style="orderBookListTdStyle.price"></td>

                                <td v-text="formatNum(item.TotalNum, 'quantity', item)" :style="orderBookListTdStyle.quantity"></td>
                                <td v-text="formatNum(item.DealNum, 'quantity', item)" :style="orderBookListTdStyle.remaining"></td>

                                <td v-if="item.Status === -2" v-text="lang['cancellation deal']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === -1" v-text="lang['of no avail']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 0" v-text="lang['waiting deal']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 1" v-text="lang['partially filled']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === 2" v-text="lang['complete transaction']" :style="orderBookListTdStyle.status"></td>
                                <td v-if="item.Status === -99" v-text="'--'" :style="orderBookListTdStyle.status"></td>

                                <!--td v-text="item.OrderNO" :style="orderBookListTdStyle.orderId"></td-->
                                <td :style="orderBookListTdStyle.operation">
                                  <a class="btn" :class="{opened: item.isShowDetailList}" @click="openDetailList(1, index, item, item.ID, item.TradeSide)">{{lang['detailed information']}}
                                    <img src="./../images/down-detail.png" v-if="item.isShowDetailList">
                                    <img src="../../../assets/images/head/menu-arrow-up.png" v-if="!item.isShowDetailList">
                                  </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </tr>
                        <tr v-show="item.detailList && item.isShowDetailList">
                          <td colspan="9">
                            <table class="detailList">
                              <thead>
                                <tr>
                                  <td :style="detailListTdStyle.time">{{lang['time']}}</td>
                                  <td :style="detailListTdStyle.price">{{lang['street value']}}</td>
                                  <td :style="detailListTdStyle.quantity">{{lang['transaction volume']}}</td>
                                  <td :style="detailListTdStyle.empty">&nbsp;</td>
                                  <!--td :style="detailListTdStyle.fee">{{lang['poundage']}}</td-->
                                  <!--td :style="detailListTdStyle.orderId">{{lang['order id']}}</td-->
                                </tr>
                              </thead>
                              <tbody>
                                <tr v-for="item2 in item.detailList" :data-list="item.detailList" :data-show="item.isShowDetailList">
                                  <td :style="detailListTdStyle.time" v-text="formatDate(item2.CreateTime)">2017-12-09 18:24:38</td>
                                  <td :style="detailListTdStyle.price" v-text="formatNum(item2.Price, 'price', item2)"></td>
                                  <td :style="detailListTdStyle.quantity" v-text="formatNum(item2.Num, 'quantity', item2)"></td>
                                  <td :style="detailListTdStyle.empty">&nbsp;</td>
                                  <!--td :style="detailListTdStyle.fee" v-text="item2.FundsFee">0.2</td-->
                                  <!--td :style="detailListTdStyle.orderId" v-text="item2.OrderNO">564564464</td-->
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- 成交记录 -->
            <table class="tradeRecordList" v-show="currentListType === 2">
              <tbody>
                <tr v-for="(item, index) in tradeRecordDetailList">
                  <td v-text="formatDate(item.CreateTime)" :style="tradeRecordDetailListTdStyle.time"></td>
                  <td v-text="item.Symbol" :style="tradeRecordDetailListTdStyle.symbol"></td>

                  <td v-if="item.TradeSide === 1" v-text="lang['sell']" class="sell" :style="tradeRecordDetailListTdStyle.side"></td>
                  <td v-if="item.TradeSide === 0" v-text="lang['buy']" class="buy" :style="tradeRecordDetailListTdStyle.side"></td>

                  <td v-text="formatNum(item.Price, 'price', item)" :style="tradeRecordDetailListTdStyle.price"></td>
                  <td v-text="formatNum(item.Num, 'quantity', item)" :style="tradeRecordDetailListTdStyle.quantity"></td>
                  <!--td v-text="item.FundsFee" :style="tradeRecordDetailListTdStyle.fee"></td-->
                  <!--td v-text="item.OrderNO" :style="tradeRecordDetailListTdStyle.orderId"></td-->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="swpaging"  v-if="show">
        <SwPaging :lang="lang" :pageSize="pageSize" :pageIndex="pageIndex" :total="totle" :pageRange="7" @jumpPage="jumpPage"></SwPaging>
      </div>
    </div>

    <div v-show="!userInfo.userName" class="loginShade">
      <p class="login">
        <router-link :to="{path: '/user/login', query: {from: $route.name}}">{{lang.headerLogin}}</router-link>
        <i class="line"></i>
      </p>
      <p class="register">
        <router-link :to="{path: '/user/register', query: {from: $route.name}}" class="a2">{{lang.headerRegistration}}</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import ModalApi from '@/components/SwModal/api.js'
import $ from 'jquery'
import Utils from '@/utils/Utils.js'
import EventBus from '@/service/EventBus.js'
import commonFilter from '@/filters/common.js'
import Decimal from '@/libs/decimal.min.js'
import SwPaging from '@/components/SwPaging/index.vue'

export default {
  props: [
    'userInfo',
    'lang',
    'winMinHeight',
    'listType',
    'show',
    'pageSize'
  ],
  data () {
    return {
      pair: {},
      height: '40%',
      orderBookList: [],
      orderBookListTemp: [],
      tradeRecordList: [],
      tradeRecordDetailList: [],
      allOrderBookList: [],
      pairs: [],
      orderBookListTdStyle: {
        time: {width: '18%', 'text-align': 'left', 'text-indent': '30px'},
        symbol: {width: '12%', 'text-align': 'left'},
        side: {width: '4%', 'text-align': 'left'},
        price: {width: '10%', 'text-align': 'right'},
        quantity: {width: '12%', 'text-align': 'right'},
        remaining: {width: '12%', 'text-align': 'right'},
        status: {width: '13%', 'text-align': 'right'},
        // orderId: {width: '14%', 'text-align': 'right'},
        operation: {width: '16%', 'padding-right': '3%', 'text-align': 'right'}
      },
      detailListTdStyle: {
        time: {width: '18%', 'text-align': 'left', 'text-indent': '30px'},
        price: {width: '27%', 'text-align': 'right'},
        quantity: {width: '25%', 'text-align': 'right'},
        empty: {width: '30%'}
        /*,
        fee: {width: 'auto'},
        orderId: {width: '18%'}
        */
      },
      tradeRecordDetailListTdStyle: {
        time: {width: '26%', 'text-align': 'left', 'text-indent': '30px'},
        symbol: {width: '20%', 'text-align': 'left'},
        side: {width: '9%', 'text-align': 'left'},
        price: {width: '16%', 'text-align': 'right'},
        quantity: {width: '24%', 'padding-right': '5%', 'text-align': 'right'}
        /*,
        fee: {width: '14%', 'text-align': 'right'},
        orderId: {width: '14%', 'text-align': 'right'}
        */
      },
      currentListType: 0, // 0委托 1历史订单 2成交记录
      // 提醒角标
      subscript: {
        current: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: 0
        },
        history: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: 0
        },
        deal: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: 0
        }
      },
      currentDateType: -1, // -1全部 0当日 1一周 2一个月 3三个月 4日期选择范围
      tradeRecordListScrollWrapHeight: 500,
      tradeRecordToolHeight: 0,
      inited: false,
      startDate: '',
      endDate: '',
      selectedStartDate: '',
      selectedEndDate: '',
      currentSort: false,
      readOnly: true,
      totle: 0,          // 总共的页数
      pageIndex: 1      // 当前页
    }
  },
  methods: {
    // chrome记住密码情况下，通过日期组件可读状态修复自动填充问题
    setDateInit () {
      this.readOnly = false
    },
    // 获取跳转的页码
    jumpPage (no) {
      this.pageIndex = no
      this.getListByListType(this.currentListType)
    },
    /**
    * 表格排序
    * @field [string]  排序字段
    * @sort [boolean] false(asc: 升序)； true(deasc: 降序)
    * @dataType [object] 排序传参对象
    * @event [event object]
    */
    changeSortBy (field, sort, dataType, event) {
      let _field = field
      let _sort = sort
      let _dataType = dataType
      let el = event.currentTarget
      $('.sortField').removeClass('activeUp activeDown')
      if (_sort) {
        $(el).addClass('activeDown')
      } else {
        $(el).addClass('activeUp')
      }
      switch (_dataType) {
        case 'entrust':
          //
          this.getOrderBookList('Trade/GetEntrustOrderNewList', {SortName: _field, Direction: _sort})
          this.currentSort = !_sort
          break
        case 'history':
          //
          this.getTradeRecordList('Trade/GetHistoryOrderNewList', {SortName: _field, Direction: _sort})
          this.currentSort = !_sort
          break
        case 'customer':
          //
          this.getTradeRecordDetailList('Deal/GetCustomerDealNewList', {SortName: _field, Direction: _sort})
          this.currentSort = !_sort
          break
        default:
          break
      }
    },
    // 记录表格日期筛选
    selectStartAndEndDate () {
      this.startDate = this.selectedStartDate ? Utils.formatDate(this.selectedStartDate, 'yyyy-MM-dd') + ' 00:00:00' : ''
      this.endDate = this.selectedEndDate ? Utils.formatDate(this.selectedEndDate, 'yyyy-MM-dd') + ' 23:59:59' : ''
      if (this.currentListType === 0) {
        this.getOrderBookList('Trade/GetEntrustOrderList')
      }
      if (this.currentListType === 1) {
        this.getTradeRecordList('Trade/GetHistoryOrderList')
      }
      if (this.currentListType === 2) {
        this.getTradeRecordDetailList('Deal/GetCustomerDealList')
      }
    },
    formatNum (val, flag, item) {
      let pair = this.pairs[item.TradingConfigID]
      let _buyerPrecision = 2
      let _sellerPrecision = 2
      let prec = 2
      if (pair) {
        _buyerPrecision = pair.buyerPrecision ? pair.buyerPrecision : 2
        _sellerPrecision = pair.sellerPrecision ? pair.sellerPrecision : 2
      } else {
        _buyerPrecision = item.MinBuyerCoinDigit ? item.MinBuyerCoinDigit : 2
        _sellerPrecision = item.MinSellerCoinDigit ? item.MinSellerCoinDigit : 2
      }
      prec = flag === 'price' ? _buyerPrecision : _sellerPrecision
      if (flag === 'quantity') {
        return commonFilter.currency(commonFilter.fillDecimal((new Decimal(val)).toFixed(10), prec), '', '', prec)
      } else {
        return commonFilter.fillDecimal((new Decimal(val)).toFixed(10), prec)
      }
    },
    /* formatNum (val, flag, item) {
      let pair = this.pairs[item.TradingConfigID]
      // let prec = flag === 'price' ? pair.buyerPrecision : pair.sellerPrecision
      let prec = 0
      switch (item.TradingConfigID) {
        case '_DSQ3BmslE-cS-HPIPOlnA':
          prec = flag === 'price' ? 3 : 3
          break
        case '_DSQ3BmslE-cS-HPJPOlnA':
          prec = flag === 'price' ? 3 : 3
          break
        case '_DSQ3BmslE-cS-HPKPOlnA':
          prec = flag === 'price' ? 8 : 3
          break
        default:
          if (pair) {
            prec = flag === 'price' ? pair.buyerPrecision : pair.sellerPrecision
          }
          break
      }
      if (flag === 'quantity') {
        return commonFilter.currency(commonFilter.fillDecimal((new Decimal(val)).toFixed(10), prec), '', '', prec)
      } else {
        return commonFilter.fillDecimal((new Decimal(val)).toFixed(10), prec)
      }
    }, */
    formatDate (val) {
      return Utils.formatDate(Utils.fixNewDateForIE(val), 'yyyy-MM-dd hh:mm:ss')
    },
    createSomeValueWithArrayForRealtimePush (list = []) {
      list.forEach((v) => {
        v.Symbol = this.pairs[v.TradingConfigID].Symbol
        if (v.SellerID === this.userInfo.userId) {
          v.TradeSide = 1
          v.FundsFee = v.SellerFundsFee
          v.OrderNO = v.SellerOrderNO
        } else if (v.BuyerID === this.userInfo.userId) {
          v.TradeSide = 0
          v.FundsFee = v.BuyerFundsFee
          v.OrderNO = v.BuyerOrderNO
        }
      })
    },
    getListByListType (type) {
      this.currentListType = type
      this.currentDateType = -1 // 每次切换列表类型都要重置日期范围类型
      this.calcDate()
      if (this.currentListType === 0) { // && !this.tradeRecordDetailList.length
        this.getOrderBookList('Trade/GetEntrustOrderList')
      }
      if (this.currentListType === 1) { // && !this.tradeRecordList.length
        this.getTradeRecordList('Trade/GetHistoryOrderList')
      }
      if (this.currentListType === 2) { // && !this.tradeRecordDetailList.length
        this.getTradeRecordDetailList('Deal/GetCustomerDealList')
      }

      // 点击后移除角标
      this.removeSubscript()

      this.$nextTick(() => {
        $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
      })
    },
    getListByDateType  (type) {
      this.currentDateType = type
      this.calcDate()
      if (this.currentListType === 0) {
        this.getOrderBookList('Trade/GetEntrustOrderList')
      }
      if (this.currentListType === 1) {
        this.getTradeRecordList('Trade/GetHistoryOrderList')
      }
      if (this.currentListType === 2) {
        this.getTradeRecordDetailList('Deal/GetCustomerDealList')
      }
    },
    openDetailList (type, index, item, id, side) {
      item.isShowDetailList = !item.isShowDetailList

      if (item.isShowDetailList) {
        // 打开一个，关闭其它
        if (type === 0) {
          this.orderBookList.filter((v) => v.ID !== id).forEach((v) => {
            if (v.isShowDetailList) v.isShowDetailList = false
          })
        } else if (type === 1) {
          this.tradeRecordList.filter((v) => v.ID !== id).forEach((v) => {
            if (v.isShowDetailList) v.isShowDetailList = false
          })
        }

        this.$http.post('Deal/GetDealDetailList', {
          orderID: id,
          tradeSide: side
        }, {
          // mock: 'GetDealDetailList',
          // isDisposeCode: false
        }).then((res) => {
          item.detailList = res.Data || []

          if (type === 0) {
            this.$set(this.orderBookList, index, item)
          } else if (type === 1) {
            this.$set(this.tradeRecordList, index, item)
          }

          this.$nextTick(() => {
            $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
          })
        })
      // 关闭
      } else {
        if (type === 0) {
          this.$set(this.orderBookList, index, item)
        } else if (type === 1) {
          this.$set(this.tradeRecordList, index, item)
        }
      }

      this.$nextTick(() => {
        $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
      })
    },
    // 加载更多
    loadMoreRecord () {
      let tempLength = this.orderBookListTemp.length
      if (tempLength >= 20 && tempLength < 40) {
        this.orderBookListTemp = this.orderBookList.slice(0, 40)
        console.log(this.orderBookList.slice(0, 40))
      } else if (tempLength > 40 && tempLength < 60) {
        this.orderBookListTemp = this.orderBookList.slice(0, 60)
      } else if (tempLength > 60 && tempLength < 80) {
        this.orderBookListTemp = this.orderBookList.slice(0, 80)
      } else {
        this.orderBookListTemp = this.orderBookList
      }
      this.$nextTick(() => {
        $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
      })
    },
    getOrderBookList (apiUrl, dataOption) {
      this.$http.post(apiUrl, Object.assign({
        // TradingConfigID: this.pair.TradingConfigID,
        OrderNO: '',
        TradeDirection: '',
        UserID: this.userInfo.userId,
        StartDate: this.startDate, // date-time
        EndDate: this.endDate,
        OrderStatus: '',
        PageIndex: this.pageIndex,
        PageSize: this.pageSize || 100
      }, dataOption), {
        // mock: 'GetEntrustOrderList',
        isDisposeCode: false
      }).then((res) => {
        this.orderBookList = res.Data || []
        if (this.orderBookList.length > 20) {
          this.orderBookListTemp = this.orderBookList.slice(0, 20)
        } else {
          this.orderBookListTemp = this.orderBookList
        }

        // 存储我的全部委托
        if (!this.StartDate && !this.EndDate) this.allOrderBookList = this.orderBookList.slice(0)
        this.sendOrderBookQuantity()

        this.$nextTick(() => {
          $(this.$refs.tradeRecordListScrollWrap).niceScroll({
            railoffset: { // 修复滚动条的left
              left: -10
            }
          }).resize()
        })

        // this.setScrollBar()
        // 获取总条数
        this.totle = res.TotalItem
      })
    },
    getTradeRecordList (apiUrl, dataOption) {
      this.$http.post(apiUrl, Object.assign({
        // TradingConfigID: this.pair.TradingConfigID,
        OrderNO: '',
        TradeDirection: '',
        UserID: this.userInfo.userId,
        StartDate: this.startDate, // date-time
        EndDate: this.endDate,
        OrderStatus: '',
        PageIndex: this.pageIndex,
        PageSize: this.pageSize || 100
      }, dataOption), {
        // mock: 'GetHistoryOrderList',
        isDisposeCode: false
      }).then((res) => {
        this.tradeRecordList = res.Data || []
        this.$nextTick(() => {
          $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
        })
         // 获取总条数
        this.totle = res.TotalItem
      })
    },
    getTradeRecordDetailList (apiUrl, dataOption) {
      this.$http.post(apiUrl, Object.assign({
        StartDate: this.startDate, // date-time
        EndDate: this.endDate,
        PageIndex: this.pageIndex,
        PageSize: this.pageSize || 100,
        ClientType: 0
      }, dataOption), {
        // mock: 'GetCustomerDealList',
        isDisposeCode: false
      }).then((res) => {
        this.tradeRecordDetailList = res.Data || []

        this.$nextTick(() => {
          $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
        })
        // 获取总条数
        this.totle = res.TotalItem
      })
    },
    cancelOrder (item) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'commonModal smallModal',
        title: 'cancellation of order point out',
        content: 'Confirmation withdrawal',
        okText: 'determineBthAD',
        noText: 'cancelBthAD',
        isShowBg: true,
        ok: () => {
          confirm.close()
          this.$http.post('Trade/CancelOrder', {
            tradingConfigID: item.TradingConfigID,
            orderID: item.ID,
            side: item.TradeSide
          }).then((res) => {
            if (res.StatusCode === '200') {
              this.forceHiddenJustCancelOrder(item.ID)
            }
          })
        }
      })
    },
    changeListType (type) {
      this.currentListType = type
    },
    changeDateType (type) {
      this.currentDateType = type
    },
    calcDate () {
      let type = this.currentDateType
      let today = new Date()
      let todayValues = Utils.getDateValues(today)
      let startDate
      let endDate
      switch (type) {
        case -1:
          startDate = ''
          endDate = ''
          break
        case 0:
          startDate = `${todayValues.year}-${todayValues.month}-${todayValues.day} 00:00:00`
          endDate = `${todayValues.year}-${todayValues.month}-${todayValues.day} ${todayValues.hours}:${todayValues.minutes}:${todayValues.seconds}`
          break
        case 1:
          let weekStartDate = new Date()
          let weekStartTime = weekStartDate.getTime()
          weekStartTime -= (7 * 24 * 60 * 60 * 1000)
          weekStartDate.setTime(weekStartTime)
          let weekStartDateValues = Utils.getDateValues(weekStartDate)
          startDate = `${weekStartDateValues.year}-${weekStartDateValues.month}-${weekStartDateValues.day} ${weekStartDateValues.hours}:${weekStartDateValues.minutes}:${weekStartDateValues.seconds}`
          endDate = `${todayValues.year}-${todayValues.month}-${todayValues.day} ${todayValues.hours}:${todayValues.minutes}:${todayValues.seconds}`
          break
        case 2:
          let monthStartDate = new Date()
          let monthStartTime = monthStartDate.getTime()
          monthStartTime -= (30 * 24 * 60 * 60 * 1000)
          monthStartDate.setTime(monthStartTime)
          let monthStartDateValues = Utils.getDateValues(monthStartDate)
          startDate = `${monthStartDateValues.year}-${monthStartDateValues.month}-${monthStartDateValues.day} ${monthStartDateValues.hours}:${monthStartDateValues.minutes}:${monthStartDateValues.seconds}`
          endDate = `${todayValues.year}-${todayValues.month}-${todayValues.day} ${todayValues.hours}:${todayValues.minutes}:${todayValues.seconds}`
          break
        case 3:
          let month3StartDate = new Date()
          let month3StartTime = month3StartDate.getTime()
          month3StartTime -= (30 * 3 * 24 * 60 * 60 * 1000)
          month3StartDate.setTime(month3StartTime)
          let month3StartDateValues = Utils.getDateValues(month3StartDate)
          startDate = `${month3StartDateValues.year}-${month3StartDateValues.month}-${month3StartDateValues.day} ${month3StartDateValues.hours}:${month3StartDateValues.minutes}:${month3StartDateValues.seconds}`
          endDate = `${todayValues.year}-${todayValues.month}-${todayValues.day} ${todayValues.hours}:${todayValues.minutes}:${todayValues.seconds}`
          break
      }
      this.startDate = startDate
      this.endDate = endDate
      // console.log(type, startDate, endDate)
    },
    // 发送给委托列表显示
    sendOrderBookQuantity () {
      let sellList = []
      let buyList = []

      this.allOrderBookList.forEach((item) => {
        if (item.TradingConfigID === this.pair.TradingConfigID) {
          item.TradeSide === 1 && sellList.push(item)
          item.TradeSide === 0 && buyList.push(item)
        }
      })
      this.orderBookListTemp = this.orderBookList.slice(0, 20)
      EventBus.$emit('sendMyOrderBook', {sellList: sellList.slice(0), buyList: buyList.slice(0)})
    },
    // 后端要求强制在前端隐藏刚撤的单
    forceHiddenJustCancelOrder (id) {
      setTimeout(() => {
        this.orderBookList.find(v => v.ID === id) && this.getOrderBookList('Trade/GetEntrustOrderList')
      }, 1000)
    },
    updateOrderBookList (updateList, list) {
      let i = 0
      let l = 0
      // -2取消交易 -1无效 0等待成交 1部分成交 2全部成交 -99备用
      while (updateList[i]) {
        // 对比当前委托
        for (l = 0; l < list.length; l++) {
          if (updateList[i].ID === list[l].ID && (updateList[i].Status !== 0 && updateList[i].Status !== 1)) {
            // console.log('删除', updateList[i].Status)
            list.splice(l, 1) // 原列表删除待更新的记录
            break
          }
          if (updateList[i].ID === list[l].ID && (updateList[i].Status === 0 || updateList[i].Status === 1)) {
            // console.log('更新', updateList[i].Status)
            list.splice(l, 1) // 原列表删除待更新的记录
            list.unshift(updateList[i]) // 将更新的记录添加到列头
            break
          }
          // 和原列表对比了一遍若即不是记录重复也不是记录更换，则是记录新增
          if (l + 1 === list.length) {
            // console.log('新增', updateList[i].Status)
            list.unshift(updateList[i]) // 将更新的记录添加到列头
            break
          }
        }
        // 原列表为0则新增进去
        if (list.length === 0 && (updateList[i].Status === 0 || updateList[i].Status === 1)) {
          list.unshift(updateList[i])
        }

        i++
      }
    },
    updateTradeRecordList (updateList, list) {
      let i = 0
      let k = 0

      // -2取消交易 -1无效 0等待成交 1部分成交 2全部成交 -99备用
      while (updateList[i]) {
        // 对比历史订单
        for (k = 0; k < list.length; k++) {
          // 更新
          if (updateList[i].ID === list[k].ID && updateList[i].Status !== 0 && updateList[i].Status !== 1) {
            list.splice(k, 1) // 原列表删除待更新的记录
            list.unshift(updateList[i]) // 将更新的记录添加到列头
            break
          }
          // 新增，如和原列表对比了一遍若即不是记录重复也不是记录更换，只要状态不是0和1，则放进历史列表
          if (k + 1 === list.length && updateList[i].Status !== 0 && updateList[i].Status !== 1) {
            list.unshift(updateList[i])
            break
          }
        }
        // 原列表为0则新增进去
        if (list.length === 0 && updateList[i].Status !== 0 && updateList[i].Status !== 1) {
          list.unshift(updateList[i])
        }

        i++
      }

      this.updateSubscript(updateList)
    },
    // 更新角标
    removeSubscript () {
      let self = this
      switch (self.currentListType) {
        // 当前委托
        case 0:
          self.subscript.current = {
            obj: {
              ID: '',
              OrderNO: '',
              TradingConfigID: ''
            },
            count: 0
          }
          break
        // 历史委托
        case 1:
          self.subscript.history = {
            obj: {
              ID: '',
              OrderNO: '',
              TradingConfigID: ''
            },
            count: 0
          }
          break
        // 成交记录
        case 2:
          self.subscript.deal = {
            obj: {
              ID: '',
              OrderNO: '',
              TradingConfigID: ''
            },
            count: 0
          }
          break
      }
      Utils.LS.set('subscript', self.subscript)
    },

    updateSubscript (list) {
      let self = this

      // -2取消交易 -1无效 0等待成交 1部分成交 2全部成交 -99备用
      for (var i = 0; i < list.length; i++) {
        // 当前委托
        if (list[i].Status === 0 || list[i].Status === 1) {
          if (self.currentListType !== 0) {
            if (self.subscript.current.obj.ID !== list[i].ID) {
              self.subscript.current.count = self.subscript.current.count + 1
            }
            self.subscript.current.obj = {
              ID: list[i].ID,
              OrderNO: list[i].OrderNO,
              TradingConfigID: list[i].TradingConfigID
            }
          } else {
            self.subscript.current.count = 0
          }
        }
        // 历史委托
        if (list[i].Status === -1 || list[i].Status === -2 || list[i].Status === 2) {
          if (self.currentListType !== 1) {
            if (self.subscript.history.obj.ID !== list[i].ID) {
              self.subscript.history.count = self.subscript.history.count + 1
            }
            self.subscript.history.obj = {
              ID: list[i].ID,
              OrderNO: list[i].OrderNO,
              TradingConfigID: list[i].TradingConfigID
            }
          } else {
            self.subscript.history.count = 0
          }
        }
        // 成交记录
        if (list[i].Status === 2) {
          if (self.currentListType !== 2) {
            if (self.subscript.deal.obj.ID !== list[i].ID) {
              self.subscript.deal.count = self.subscript.deal.count + 1
            }
            self.subscript.deal.obj = {
              ID: list[i].ID,
              OrderNO: list[i].OrderNO,
              TradingConfigID: list[i].TradingConfigID
            }
          } else {
            self.subscript.deal.count = 0
          }
        }
      }
      Utils.LS.set('subscript', self.subscript)
    },

    resize () {
      // let $tradingRecordWrap = $('.tradingRecordWrap')
      // let winHeight = $(window).innerHeight()
      // if (winHeight < this.winMinHeight) {
      //   winHeight = this.winMinHeight
      // }
      // let headHeight = $('.pageHead').outerHeight()
      // let tradingPairHeight = $('.tradingPair').outerHeight()
      // let tradingViewWrap = $('.tradingViewWrap').outerHeight()
      let tabTitleHeight = $('.tradingRecord .tabTitle').outerHeight()
      let toolsHeight = $('.tradingRecord .tools').outerHeight()
      let thHeight = 32
      /*
      this.tradeRecordListScrollWrapHeight = (winHeight - headHeight - tradingPairHeight - tabTitleHeight - toolsHeight - thHeight) * 0.3 - parseFloat($tradingRecordWrap.css('border-top-width')) - parseFloat($tradingRecordWrap.css('border-bottom-width'))
      */
      // tradeRecord和trade同高
      this.tradeRecordListScrollWrapHeight = $('.tradeWrap').height() - tabTitleHeight - toolsHeight - thHeight
      this.tradeRecordToolHeight = toolsHeight
  /*
      console.log('winHeight', winHeight)
      console.log('headHeight', headHeight)
      console.log('tradingPairHeight', tradingPairHeight)
      console.log('tradingViewWrap', tradingViewWrap)
      console.log('tabTitleHeight', tabTitleHeight)
      console.log('toolsHeight', toolsHeight)
      console.log('thHeight', thHeight)
  */
      // $tradingRecordWrap.niceScroll({
      //   oneaxismousemode: false
      // })
    },
    init () {
      this.inited = true
      this.calcDate()
      this.getOrderBookList('Trade/GetEntrustOrderList')
      this.resize()
      $(window).resize(this.resize)
    }
  },
  created () {
    EventBus.$on('switchPair', (pair) => {
      this.pair = pair
      this.init()
    })

    EventBus.$on('updatePairs', (pairs) => {
      this.pairs = pairs
    })

    EventBus.$on('pushOrderBookList', (nv) => {
      if (Object.prototype.toString.call(nv) !== '[object Array]' || !nv.length) return
      // tradingIndex.localTime(nv, 'OrderDate')

      this.updateOrderBookList(nv, this.orderBookList)
      this.updateTradeRecordList(nv, this.tradeRecordList)

      // 委托列表显示我的数量
      this.updateOrderBookList(nv, this.allOrderBookList)
      this.sendOrderBookQuantity()

      this.$nextTick(() => {
        $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
      })
    })

    EventBus.$on('pushTradeRecordDetailList', (nv) => {
      this.createSomeValueWithArrayForRealtimePush(nv)

      for (let i = 0; i < nv.length; i++) {
        // 对比历史订单
        for (let k = 0; k < this.tradeRecordDetailList.length; k++) {
          // 更新
          if (nv[i].ID === this.tradeRecordDetailList[k].ID) {
            this.tradeRecordDetailList.splice(k, 1) // 原列表删除待更新的记录
            this.tradeRecordDetailList.unshift(nv[i]) // 将更新的记录添加到列头
            break
          }
          // 新增，如和原列表对比了一遍若即不是记录重复也不是记录更换，只要状态不是0和1，则放进历史列表
          if (k + 1 === this.tradeRecordDetailList.length) {
            this.tradeRecordDetailList.unshift(nv[i])
            break
          }
        }
        // 原列表为0则新增进去
        if (this.tradeRecordDetailList.length === 0 && nv[i].Status !== 0 && nv[i].Status !== 1) {
          this.tradeRecordDetailList.unshift(nv[i])
        }
      }

      this.$nextTick(() => {
        $(this.$refs.tradeRecordListScrollWrap).niceScroll().resize()
      })
    })
  },
  mounted () {
    let self = this
    if (this.userInfo.userName) {
      self.subscript = {
        current: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: 0
        },
        history: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: (Utils.LS.get('subscript') && Utils.LS.get('subscript').history.count) || 0
        },
        deal: {
          obj: {
            ID: '',
            OrderNO: '',
            TradingConfigID: ''
          },
          count: (Utils.LS.get('subscript') && Utils.LS.get('subscript').deal.count) || 0
        }
      }
    }
    // 监听来自父组件(交易记录页面 TradeList.vue)的命令
    this.getListByListType(this.listType || 0)

    /* eslint-disable */
    /*
    setTimeout(() => {
      let obj = {"OrderID":"X7264vUUwEOCGkLselvIVA","OrderNO":"X7264vUU","UserID":"TqIQu0vPU0empoKCP8NoDQ","ID":null,"TradingConfigID":"_DSQ3BmslE-cS-HP3POlnA","DealNO":null,"Price":11275.50000000,"Num":1.00000000,"TotalAmt":11275.50000000,"CreateTime":"2017-12-31 16:36:22","TriggerType":1}
      obj.BuyerID = 'TqIQu0vPU0empoKCP8NoDQ'
      obj.SellerID = 'TqIQu0vPU0empoKCP8NoDQ'
      obj.BuyerFundsFee = 1
      obj.SellerFundsFee = 2
      let objs = [obj]
      this.createSomeValueWithArrayForRealtimePush(objs)
      objs.forEach((v) => {
        this.tradeRecordDetailList.unshift(v)
      })
    }, 3000)
*/
  },
  components: {
    SwPaging
  }
}
</script>

<style lang="less">
@import "./../../../mixins.less";
@import "../css/adaptation.less";
@red: #d72727;
@green: #54a84e;
@white: #b5b8c0;

.tradelist-page, .tradingPage {

  .tradingRecordWrap {
    position: relative;
    font-size: 12px;
    border-top: @tradingBorder;
    border-bottom: @tradingBorder;
    background-color: @tradingModuleBgColor;

    .tradeRecordListScrollWrap {
      position: relative;
      outline: none; // 火狐虚线
    }

    .swpaging {
      margin-top: 20px;
    }

    .tradingRecord {
      overflow: hidden;
      // min-width: 900px;
      color: #7f8492;

      .tabTitle {
        height: 30px;
        line-height: 30px;
        background-color: @tradingHeadBgColor;

        span {
          float: left;
          padding: 0 30px;
          cursor: pointer;
          white-space: nowrap;

          &.active {
            color: #80919C;
            background-color: #191f2b;
          }

          i {
            display: inline-block;
            min-width: 10px;
            padding: 2px 5px;
            font-size: 12px;
            line-height: 1;
            color: #fff;
            margin-left: 5px;
            margin-top: -2px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            background-color: #EA3333;
            border-radius: 10px;
          }
        }

        .more {
          margin-right: 30px;
          float: right;
          color: #ccc;
          &:hover {
            color: #2E7FD0;
          }
        }
      }

      .wrap {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 256px;
        .tools {
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid #2f3645;
          min-width: 900px;

          .btn {
            float: left;
            margin-left: 20px;
            padding: 0 10px;
            text-align: center;
            cursor: pointer;

            &.active {
              color: @tradingLinkActiveColor;
            }
          }

          .el-input {position:relative;top: -2px;width: 146px;font-size: 12px;}
          .el-input__inner {
            position: relative;
            top: 2px;
            height: 20px;
            line-height: 20px;
            padding-right: 10px;
            background: transparent;
            border: 1px solid #2A3440;
            border-radius: 2px;
            color:#ccc;
            font-size: 12px;
          }
          .el-range-input {
            height: 16px;
            line-height: 16px;
            background:#2A3440;
            border-radius: 2px;
            font-size: 12px;
            color:#ccc;
          }
          .el-input__icon {
            line-height: 1;
          }
          .el-date-editor .el-range__icon {
            line-height: 12px;
            font-size: 12px;
          }
          .el-input__prefix, .el-input__suffix {
            top: 2px;
          }
          .el-date-editor .el-range-separator {
            line-height: 12px;
            font-size: 12px;
            color: #c0c4cc;
          }
          .date {
            float: left;
            padding-left:30px;
            color: #7f8492;
          }
          .filterBth{
            margin-top: 6px;
            margin-left: 10px;
            color: #ccc;
            line-height: 18px;
            width: auto;
            padding: 0 12px;
            font-size: 12px;
            top: 48px;
            border: 1px solid #2A3440;
            font-weight: lighter;
            border-radius: 2px;
            img {
              display: inline-block;
              position: relative;
              top: 2px;
            }
          }
        }

        .list-view {
          position: absolute;
          width: 100%;
        }

        .tradeRecordList {
          text-align: left;
          min-width: 900px;
          // text-align: center;

          th {
            line-height: 30px;
            white-space: nowrap;
          }
          td {
            line-height: 24px;

            &.sell {
              color: @red;
            }
            &.buy {
              color: @green;
            }
          }
          .cancelAll {
            display: inline-block;
            padding: 3px 8px;
            color: #fff;
            background-color: #2b3140;
          }
          .btn {
            color: @tradingLinkActiveColor;

            &:last-of-type {
              margin-left: 10px;
            }
            &.opened {
              color: #666a77;
            }
            img {
              margin-left: 4px;
            }
          }

          .detailList {
            margin: 4px 0;
            font-size: 12px;
            color: #5b5f69;
            background-color: #111b25;
          }
          .loadmore {
            text-align: center;
            margin: 10px 0;

            span {
              display: inline-block;
              cursor: pointer;
              border: 1px solid #5b5f69;
              padding: 4px 20px;
              border-radius: 6px;

              &:hover {
                border-color: #2E7FD0;
                color: #2E7FD0;
              }
            }
          }
        }
      }
    }
  }
}

/*查看更多，交易列表页面样式*/
.tradelist-page {
  min-width: 800px;

  .tradingRecordWrap {
    width: 1200px;
    margin: 30px auto;
    border: 0;
    font-size: 13px;

    .tradingRecord {

      .tabTitle {
        height: 40px;
        line-height: 40px;

        .more {
          display: none;
        }
      }

      .tools {
        height: 35px;
        line-height: 35px;
      }

      .tradeRecordListScrollWrap {

        table tr {
          height: 40px;
        }
      }
    }
  }
}


@media (max-height: @tradingPageMinHeight) {
.tradingPage {

  .tradingRecord {

    .tabTitle {
      .mix-hl(23px);
    }
    .tools {
      .mix-hl(23px);
    }
  }
}
}

// 表格数据排序按钮
.sortField {
  cursor: pointer;
  .sortMark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 30px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
    .sortMark-icon {
      width: 0;
      height: 0;
      border: 4px solid transparent;
      position: absolute;
      left: 7px;
    }
    .up {
      border-bottom-color: #c0c4cc;
      top: 5px;
    }
    .down {
      border-top-color: #c0c4cc;
      bottom: 6px;
    }
  }
}
.activeUp {
  .sortMark {
    .up{
      border-bottom-color: #2E7FD0;
    }
  }
}
.activeDown {
  .sortMark {
    .down{
      border-top-color: #2E7FD0;
    }
  }
}

</style>
